// src/App.tsx
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import Model from './Model';

const App = () => {
  return (
    <div className='app' style={{ height: '500px',marginTop:'0px' }}>
      {/* 创建一个Canvas组件，设置相机位置为[1, 1, 3]，视野范围为60度 */}
      <Canvas camera={{ position: [1, 1, 3], fov:40 }}
      >
        {/* 光源 */}
        {/* 添加环境光 */}
        <ambientLight intensity={0.5} />
        {/* 添加定向光，位置为[10, 10, 10]，强度为1 */}
        <directionalLight position={[10, 10, 10]} intensity={1} />

        {/* 3D 模型，添加样式类使其可以通过CSS控制布局，这里假设添加'model-container'类用于后续样式设置 */}
        <Model url="/Shelly.glb"/>

        <OrbitControls />
      </Canvas>
    </div>
  );
};

export default App;